<template>
    <div class="risk">
        <van-search class="info_search" v-model="value" placeholder="搜索"/>
    <van-list
      style="margin-top: 10px"
      :finished="finished"
      v-model="loading"
      finished-text="没有更多了"
    >
      <van-checkbox-group ref="checkboxGroup" @change="handleChange" v-model="result">
        <van-cell v-for="(item, index) in list" :key="index">
          <div class="risk_item_radio">
            <div>
              <div class="mb-10">{{ item.ChnName }}</div>
              <div>{{ item.OrgFullName }}</div>
            </div>
            <van-checkbox :name="item.UserName"></van-checkbox>
          </div>
        </van-cell>
      </van-checkbox-group>
    </van-list>
        <div class="choose_btm">
            <div class="choose_cancel">
                <van-button class="mr-10" type="primary" size="small" @click="checkAll">全选</van-button>
                <van-button class="mr-10" type="primary" @click="toggleAll" size="small">取消全选</van-button>
                <div>已选择{{result.length}}人</div>
            </div>
            <div class="choose_confirm">
                <van-button  type="info" @click="submit">批量提交</van-button>
            </div>
        </div>
    </div>
</template>

<script>

import { getChooseUserList } from "@/api/common";
export default {
  data() {
    return {
      list: [],
      userlist:[],
      result:this.$route.query.userId.split(',')|| [],
      loading: false,
      finished: false,
      kind: this.$route.query.kind,
      userId: this.$route.query.userId,
      filter: {
        dataType: 'List',
        
        accounted: false,
        allDefault: true,
        userKind: this.$route.query.kind,
      },
      activeNames: ["1"],
      border: false,
      value: "",
      radio: "",
    };
  },
  created() {
      console.log(this.$route.query.userId);
    //  this.result = this.$route.query.userId?this.$route.query.userId.spilt(','): []
    this.getList();
  },
  methods: {
    handleChange(ids) {
      
       this.userlist = []
        ids.map(item=>{
            this.list.map(innerItem=>{
                if(innerItem.UserName == item){
                    this.userlist.push({code:innerItem.UserName,name:innerItem.ChnName})
                }
            })
        })
    },

        checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
       toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },

    submit(){
        // console.log('userlist===>',this.userlist);
      this.$router.push({
        name: "edit-chemical",
        params: {userlist:this.userlist},
      });
    },
    getList() {
      this.loading = true;
      getChooseUserList(this.filter)
        .then((res) => {
          this.loading = false;
          this.list = res.data;
          this.finished = true;
          //this.filter.page = res.data.PageIndex;
        })
        .catch((err) => {
          this.finished = true;
        });
    },

    // 文件页面
    goFile() {
      // this.$router.push('/CommonInfo/InfoDetail')
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("");
    },
  },
};
</script>

<style lang="less" scoped>
    .risk {
        height: 100vh;
        background-color: #e8f1f8;

        .info_search {
            padding: 10px;
            border-radius: 5px !important;

            .van-field__control {
                background-color: #ffffff !important;
            }
        }
    }

    .risk_item_radio {
        width: 100%;
        padding: 10px 20px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e8f1f8;
    }

    .choose_btm {
        display: flex;
        width: 100%;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        background-color: #fff;
        .choose_cancel{
            padding: 0 10px;
            display: flex;
            align-items: center;
            float: left;
        }
        .choose_confirm{
            float: right;
            border-radius: 0;
        }
    }
</style>
